<template>
  <div>
    <h3>答辩分组信息</h3>
    <a-card class="card" :bordered="false">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="答辩日期">
              <a-input disabled v-model="data.dbrq" />
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:6}">
            <a-form-item label="答辩地点">
              <a-input disabled v-model="data.dbdd" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-alert class="card" :message="'组号为'+data.dbfzbh+'的下面共有'+studentData.length+'位学生'" type="info" />
        <a-card class="card" :bordered="false">
        <a-table
          ref="table"
          size="default"
          rowKey="xh"
          :columns="studentColumns"
          :loading="loading"
          :dataSource="studentData"
          :pagination="false"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span slot="dbfzbh" slot-scope="text, record, index">
            {{ data.dbfzbh }}
          </span>

        </a-table>
        </a-card>
        <a-alert class="card" :message="'组号为'+data.dbfzbh+'的下面共有'+memberData.length+'位委员'" type="info" />
        <a-card class="card" :bordered="false">
        <a-table
          ref="table"
          size="default"
          rowKey="key"
          :columns="memberColumns"
          :loading="memberLoading"
          :dataSource="memberData"
          :pagination="false"
        >
          <span slot="serial" slot-scope="text, record, index">
            {{ index + 1 }}
          </span>
          <span slot="dbfzbh" slot-scope="text, record, index">{{ data.dbfzbh }}</span>
          <template slot="operation" slot-scope="text, record, index">
            <a @click="handleOpenEdit(record)">编辑</a>
            <a @click="handleDelMember(index)">删除</a>
          </template>
        </a-table>
        </a-card>
        <div style="text-align: center;padding-bottom: 10px;">
          <a-button type="primary" @click="handleOpenEdit">添加委员</a-button>
        </div>
      </a-card>
      <memberEdit :editVisible="editModelVisible" @close="handleEditClose" @success="handleMemberSuccess" :data="currentMember" />
  </div>
</template>

<script>

import { STable } from '~'
import memberEdit from './memberEdit.vue'

export default {
  components: {
    STable,
    memberEdit
  },
  props: {
    editVisible: {
      default: false
    },
    data:{
      default:function(){
        return {}
      }
    }
  },
  data () {
    return {
      editModelVisible:false,
      loading:false,
      memberLoading:false,
      studentData:[],
      memberData:[],
      memberColumns: [{
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '组号',
          scopedSlots: { customRender: 'dbfzbh' }
        },
        {
          title: '姓名',
          dataIndex: 'xm'
        },
        {
          title: '职称',
          dataIndex: 'zcmmc'
        },
        {
          title: '工作单位',
          dataIndex: 'gzdw'
        },
        {
          title: '成员类型',
          dataIndex: 'cylxmc'
        },
        {
          title: '是否博导',
          dataIndex: 'sfbdmc'
        },
        {
          title: '是否硕导',
          dataIndex: 'sfsdmc'
        },
        {
          title: '是否校外',
          dataIndex: 'sfxwrymc'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        }
      ],
      studentColumns: [{
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '学号',
          dataIndex: 'xh'
        },
        {
          title: '姓名',
          dataIndex: 'xm'
        },
        {
          title: '所属院系',
          dataIndex: 'ssyxmc'
        },
        {
          title: '所属专业',
          dataIndex: 'sszymc'
        },
        {
          title: '年级',
          dataIndex: 'sznj'
        }
      ],
      currentMember:{},
    }
  },
  watch:{
    data(){
      this.handleInit();
    }
  },
  created () {
    this.handleInit();
  },
  methods: {
    //初始化
    handleInit(){
      this.handleLoad();
      this.handleLoadMember();
    },
    //加载学生
    handleLoad(){
      if (!this.data.id) return;
      this.loading=true;
      this.$api.degree.pleaGroupStudent({
        dbfzxxId:this.data.id
      }).then((res)=>{
        this.studentData = res.data
        this.loading=false;
      })
    },
    //加载委员
    handleLoadMember(){
      if (!this.data.id) return;
      this.memberLoading = true;
      this.$api.degree.pleaGroupMember({
        dbfzxxId:this.data.id
      }).then(res=>{
        this.memberData = res.data
        this.memberLoading = false;
      })
    },
    // 删除委员
    handleDelMember (idx) {
      this.memberData.splice(idx,1)
      // this.$confirm({
      //   title: '删除提示',
      //   content: '确认删除选中答辩分组吗?',
      //   onOk:()=>{
      //     this.memberData.splice(idx,1)
      //     return this.$api.degree.pleaGroupSetMember(this.memberData).then(res=>{
      //           this.$message.success('删除成功');
      //         })
      //   },
      //   onCancel() {},
      // });
    },
    //添加
    handleOpenEdit(record = {}){
      this.currentMember = record;
      this.editModelVisible = true
    },
    // 保存或者新建
    handleMemberSuccess (params) {
      if (!params.id && !params.createSaid && params.cylxm === '01' && this.memberData.find(d => d.cylxm === '01')) {
        return this.$message.warn('委员主席只能添加一个')
      } else if (!params.id && !params.createSaid && params.cylxm === '03' && this.memberData.find(d => d.cylxm === '03')) {
        return this.$message.warn('委员秘书只能添加一个')
      }
      this.editModelVisible = false;
      // let msg = "添加成功";
      if (params.id||params.createSaid) {
        let memberData = this.memberData.map(e=>{
          if (params.id&&e.id == params.id) {
            e = params
          }
          if (params.createSaid&&e.createSaid==params.createSaid) {
            e = params
          }
          return e;
        })
        this.memberData = memberData;
      }else{
        this.memberData.push(Object.assign({},params,{
          dbfzxxId:this.data.id,
          createSaid:new Date().getTime()
        }))
      }
      this.memberData = this.memberData.sort((a,b) => {
        if (a.cylxm === '01') {
          return -1
        }
        return a.sort - b.sort
      })
      // this.$api.degree.pleaGroupSetMember(this.memberData).then(res=>{
      //     this.$message.success(msg);
      //     this.editModelVisible = false;
      //     this.handleLoadMember();
      // })
    },
    // 关闭添加弹层
    handleEditClose() {
      this.editModelVisible = false
    },
  }
}
</script>
